<template>
    <div class="comments" v-if="comment">
        <div class="comment_item" v-for="(data,index) in comment" :key="index">
            <div class="user_massages">
                <img :src="data.avatar_url" alt="">
                <div class="user_name">
                    <p>
                    {{data.nickname}}
                    </p>
                </div>
                <div class="user_look">
                    <img class="label-icon" src="https://static.biyao.com/mnew/img/master/comment/icon_evaluate_satisfied_48@2x_6b80b83.png">
                    <span>满意</span>
                </div>
            </div>
            <div class="goods_massage">
                <span>{{data.createTime}}</span>
                <span>{{data.spec}}</span>
            </div>
            <div class="comm_content">
                <p>{{data.content}}</p>
            </div>
            <div class="comm_img">
                <img :src="images[index]" > 
            </div>
            <div class="store_say">
                <p>[商家回复]：
                    <span >
                        <!-- {{data.reply[0].content}} -->
                    </span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['comment'],
    data(){
        return{
            images : [],
        }
    },
    created(){
        for(var index in this.comment){
            let imgs = this.comment[index].img.split(',')[0]
            console.log(imgs , index)
            this.images.push(imgs)  
            
            console.log(this.images)
        }
         
        // console.log(this.comment)
        
    }
}
</script>

<style lang="stylus" scoped>
.comments
    .comment_item
        width 100%
        padding: .24rem;
        background: #fff;
        margin-top: .2rem;
        border-radius: .16rem;
        border .01rem solid #fff
        .user_massages
            width 100%
            height .56rem
            img
                display block
                width .56rem
                height .56rem
                border-radius .56rem
                float left
            .user_name
                height .56rem
                width 2rem
                float left
                line-height .56rem
                color #333
                font-size .3rem
                margin-left .15rem
            .user_look
                height .56rem
                width 1.08rem
                line-height .56rem
                text-align: right;
                font-size: .26rem;
                color: #EBBA67;
                float right
                img
                    display block
                    width .48rem
                    height .48rem
                    margin-top .04rem
        .goods_massage
            margin-top .24rem
            width 100%
            line-height .24rem
            font-size .24rem
            color #999
        .comm_content
            margin-top .24rem
            line-height .45rem
            font-size .3rem
            color #333
        .comm_img
            width 100%
            height 4.89rem
            padding-top .15rem
            img
                display block
                margin-top .09rem
                width 4.65rem
                height 4.65rem
        .store_say
            border-top .02rem solid #ddd
            margin-top .25rem
            padding-top: .24rem;
            line-height: .34rem;
            font-size: .24rem;
            color: #3F3F3F;
</style>